<template>
    <input type="text" v-model="name">
    {{name}}
    {{person}}
</template>

<script>
    import {reactive, toRef, toRefs} from 'vue'
    export default {
        name : "Demo",
        setup(){
            // 先用reactive包裹
            const person = reactive({
                name:'zhangsan',
                age:18,
            })
            //改name不会变化
            // const name = person.name
            // 用toRef包裹成Proxy实例对象，可以检测改变，并联动的修改person里面的属性值
            // const name2 = toRef(person,'name')
            // 用ref包裹，不能联动修改person
            // const name2 = ref(person.name)
            // return {name2,person}
            // 简写成
            return {
                // name2:toRef(person,"name"),
                // toRefs是读取person里面的所有属性并返回成1个数组
                // 用...把数组给添加到返回对象列表里面去
                ...toRefs(person),
                person,
            }
        },
    }
</script>

<style scoped>

</style>